

<template>
  <div class="bigbox">
    <h2>权限管理</h2>
    <hr />

    <el-dialog title="" :visible.sync="dialogFormVisible" id="title">
      <el-form :model="form" :data="tableData">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职责描述" :label-width="formLabelWidth">
          <el-input v-model="form.note" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="add">确定 </el-button>
      </div>
    </el-dialog>

    <div class="table-box">
      <el-button type="primary" @click="dialogFormVisible = true" class="btn-1"
        >新增角色</el-button
      >

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="id" label="序号" width="100" type="index">
        </el-table-column>
        <el-table-column prop="name" label="角色名称" width="150">
        </el-table-column>
        <el-table-column prop="note" label="角色描述" width="500">
        </el-table-column>

        
        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row.id)"
              type="text"
              size="small"
            >
              权限设置
            </el-button>

            <!-- <el-button type="text" @click="xiugai()" class="btn-1">编辑</el-button> -->
            <el-button type="text" @click="xiugai(scope.row)" class="btn-1"
              >编辑</el-button
            >

            <el-button type="text" size="small" @click="deleteRow(scope.row)"
              >删除</el-button
            >

            <!-- 修改增加界面 -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 修改 ------------------------------>
    <el-dialog
      title=""
      :visible.sync="centerDialogVisible"
      width="50%"
      center
    >
      <div>
        <h2>权限设置</h2>
        <span></span>
        <!-- <el-button type="primary" style="float=left" @click="save"
          >保存按钮</el-button> -->
       
        <hr />

        <el-tree
          :data="listData"
          ref="tree"
          show-checkbox
          aria-checked=""
          node-key="id"
         
        >
        </el-tree>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">关闭</el-button>
        <!-- <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        > -->
        <el-button type="primary" style="float=left" @click="save()"
          >保存按钮</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//增加角色
import { wllquanxian } from '../http/api'
//编辑角色
import { wllquanxianBianji } from '../http/api'
//删除角色
import { wllquanxiandel } from '../http/api'
//跳转名字
// import { tiazhuantitle } from '../http/api'
//保存数据
import { pagesave} from '../http/api'
//弹框添加便利
import { wllbianli} from '../http/api'

export default {
  mounted() {
     // 修改6.21便利数组
    this.xuanran()
     console.log(this.tableData)
  },
  methods: {
    xuanran(){
        wllbianli().then((res) => {
         
          
           this.tableData= res.data.value.data
         
      
          console.log(res)
          })
          .catch((err) => {
            console.log(err)
          })
    },
    //权限设置的按钮
    handleClick(row) {
      console.log(row)
      this.newpage=row;
      // this.$router.push('name')
      this.centerDialogVisible = true
      //标题跳转
      // tiazhuantitle({ id: JSON.stringify(this.form.currentId) })
      //   .then((res) => {
      //     console.log(res)
      //   })
      //   .catch((err) => {
      //     console.log(err)
      //   })
      // console.log('年后')
    },
    //删除按钮
    deleteRow(row) {

        // //删除api对接
        wllquanxiandel({id: JSON.stringify(row.id)})
          .then((res) => {
            console.log(res)
           this.xuanran()
          })
          .catch((err) => {
            console.log(err)
          })
      console.log('年后')
      console.log(this.form.currentId)

      
      



    },
    //添加角色，编辑按钮弹框判断--------------------------------------
    add() {
      if (this.isAdd === 'edit') {
        //代表编辑

        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].id == this.form.currentId) {
            this.tableData[i].name = this.form.name
            this.tableData[i].note = this.form.note

            //编辑按钮
            wllquanxianBianji({
              id: JSON.stringify(this.form.currentId),
              name: JSON.stringify(this.form.name),
              note: JSON.stringify(this.form.note),
            })
              .then((res) => {
                console.log(res)
              })
              .catch((err) => {
                console.log(err)
              })

            break
          }
        }
      } else {
        //代表添加

        var a = {}
        a.name = this.form.name
        a.note = this.form.note
        let length = this.tableData.length
        a.id = Number(this.tableData[length - 1].id) + 1 + ''
        console.log(a)
        this.tableData.push(a)

        //和后端进行接口
        wllquanxian({
          name: JSON.stringify(this.form.name),
          note: JSON.stringify(this.form.note),
        })
          .then((res) => {
            console.log(res)
          })
          .catch((err) => {
            console.log(err)
          })


      }

      this.form.name = null
      this.form.note = null
      this.dialogFormVisible = false
      this.isAdd = ''
    },
    //添加角色弹框中的确定按钮
    sure() {
      var a = {}
      a.name = this.form.name
      a.note = this.form.note
      a.id = this.tableData[length - 1].id++ + ''
      console.log(a)
      this.tableData.push(a)
      this.dialogFormVisible1 = true

     



    },
    //编辑的点击按钮
    xiugai(row) {
      console.log(row)
      this.form.name = row.name
      this.form.note = row.note
      this.dialogFormVisible = true //弹框显示
      this.isAdd = 'edit'
      console.log(row.id)
      this.form.currentId = row.id
    },
    //保存--------------------------
     save(){
   let  sendtext={id:this.newpage,ids:this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())}

     //接口
      pagesave(sendtext)
        .then(res=>{
          console.log(sendtext)
          console.log(res)
        }).catch(err=>{
          console.log(err)
        })

      },
   


  },

  data() {
    return {
      newpage:'',
      centerDialogVisible:false,
      i: 1,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        name: '',
        currentId: '',
        note: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },

     

      listData:[
          {
          id: 2,
          label: '商品基本资料',
          children: [{ //二级
            id: 21,//二级
            label: '商品基础设置',
            children: [{  //三级
              id: 211,
              label: '新增',
              
            }, {
              id: 212,
              label: '编辑'
            }]
          },{
            id:22,//二级
            label:'批发销售工费管理',           
          }]
        }, 
        ///////第二行门店基础设置
        {
          id:4,
          label: '门店基础设置',
         
        }, 
        ///////第三行员工基础设置
        {
          id: 8,
          label: '员工基础设置',
        },
          ///////第四行供应商基础设置
        {
          id: 9,
          label: '供应商管理设置',
        },
          ///////第五行供应商基础设置
        {
          id: 5,
          label: '权限设置',
          children:[{
            id:51,
            label:'角色管理',
          },{
             id:52,
            label:'权限设定',
          }]
        },
         ///////第6行系统设置
        {
          id:6,
          label:'系统设置',
          children:[{
          id:61,
          label:'编码规则设置',
          children:[{
            id:611,
            label:'新增',
          },{
            id:612,
            label:'编辑',
          },{
            id:613,
            label:'删除',
          }]
          },]

        },
         ///////第7行修改密码
        {
          id:7,
          label:'修改密码',
        },
        ///////第8行商品管理
        {
          id:1,
          label:'商品管理',
          children:[{
            id:11,
          label:'商品入库',
          children:[{
          id:111,
          label:'查询',
          },{
            id:112,
          label:'新增',
          }]
          },{
             id:12,
          label:'采购退货',
          },{
             id:13,
          label:'商品拆料',
          },{
             id:14,
          label:'配货出库',
          },{
             id:15,
          label:'商品销售',
          },{
             id:16,
          label:'销售退货',
          },{
             id:17,
          label:'商品调价',
          },{
             id:18,
          label:'门店退货',
          },{
             id:19,
          label:'库存盘点',
          }]

        }
      ],

      isAdd: '', //判断是否要删除/增加，
      currentId: '', //查找数据元素

      formLabelWidth: '120px',



      // 对话框

      

      tableData: [
        {
          id: ' 1',
          name: '销售组',
          note: '销售组成员可以进行销售，退货及查询操作',
        },
        {
          id: '2',
          name: '仓管组',
          note: '仓管成员可以进行进货、进货退货、盘点、库存调拨及查询操作',
        },
        {
          id: '3',
          name: '出库组',
          note: '出库管理',
        },
      ],
    }
  },
}
</script>
<style>
.optin-wll {
  margin-left: 20px;
}

.bigbox {
  width: 100%;
}
.table-box {
  width: 1100px;
  margin-left: 50px;
}
.bigbox h2 {
  margin-left: 50px;
}
.btn-1 {
  margin-bottom: 10px;
}
.check-input-wll {
  width: 100%;
}



  .el-tree-node__label{
   font-size: 20px;
  }
  .el-tree-node__content{
    height: 40px;
  }
  
  .el-tree-node__content{
    background-color:rgb(219, 232, 245);
  }
  
</style>